<template>
  <div class="page page-index">
    <!-- 使用 OptimizedImage 组件展示图片 -->
    <OptimizedImage src="https://cdn.codinghou.cn/coding/pc-ai/icons/index_banner3.jpg" alt="Banner Image"
      class="banner-image w-full" />

    <!-- <el-button @click="ElMessage('hello')">button</el-button>
    <ElButton :icon="ElIconEditPen" type="success">button</ElButton>
    <LazyElButton type="warning">lazy button</LazyElButton>
    <ElIconPlus class="w-4 cursor-pointer" /> -->
  </div>
</template>
<script setup lang="ts">
  import OptimizedImage from '~/components/OptimizedImage.vue'

  definePageMeta({ auth: false });
</script>
<style lang="scss">
  .page-index {
    background: #fff;

    // 可以保留 .banner-image 的样式来控制图片容器或图片本身的大小
    .banner-image {
      height: 900px; // 或者根据 OptimizedImage 的渲染结果调整
      object-fit: cover; // 控制图片如何适应容器，可选
      object-position: center top; // 控制图片对齐方式，可选
    }
  }
</style>